<template>
  <div class="banner">
    <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
      <nut-swiper-item v-for="item in list" :key="item" @click="jumpTo(item)">
        <img :src="item.carouselUrl" mode="aspectFit" alt="" />
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro'
import { reactive, toRefs, onMounted } from 'vue';
import { getSwiper } from '../../../api/index'
export default {
  setup() {
    const state = reactive({
      list: []
    });
    onMounted(() => {
      getSwiper().then(res => {
        if (res.resultCode == 200) {
          state.list = res.data
        }
      })
    });
    const jumpTo = (item) => {
      Taro.navigateTo({ url: '/packageA/pages/invite/index' });
    }
    return { ...toRefs(state), jumpTo };
  }
};
</script>
<style lang="scss">
.banner {
  .nut-swiper {
    margin-top: -50rpx;
  }

  .nut-swiper-item {
    line-height: 400px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>